<template>
  <div class="list">
    <div class="goods-top">
      <div class="top-back" @click="backhome">
        <img src="@/assets/back.png" alt="" /> 返回
      </div>
      <p>{{ listtitle }}</p>
    </div>
    <img v-if="ishow" src="@/assets/new-list-banner.png" alt="" />
    <img v-else src="@/assets/hot-list-banner.png" alt="" />
    <div class="list-banner">
      <div>综合</div>
      <div class="icon-pri" @click="tabEvents">
        <div :class="current != 'default' ? 'active' : ''">价格</div>
        <div class="iconbox">
          <van-icon :color="current == 'up' ? '#deb12a' : ''" name="arrow-up" />
          <van-icon
            :color="current == 'down' ? '#deb12a' : ''"
            name="arrow-down"
          />
        </div>
      </div>
      <div>分类</div>
    </div>
    <div class="goods-list">
      <div class="goods-item" v-for="item in goodsList.data" :key="item.id" @click="goGoodsdetail(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <p class="item-name">{{ item.name }}</p>
        <p class="item-price">¥{{ item.retail_price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsList } from "@/api/home/list/index";
export default {
  name: "Index",

  data() {
    return {
      goodsList: [],
      listtitle: "",
      current: "up",
      ishow: "",
    };
  },

  mounted() {},
  created() {
    var id = this.$route.query.id;
    this.ishow = id == 1 ? true : false;
    console.log(this.ishow);
    this.listtitle = this.$route.query.title;
    goodsList({
      isHot: id == 2 ? 1 : "",
      isNew: id == 1 ? 1 : "",
      order: "",
    }).then((res) => {
      console.log(res);
      this.goodsList = res;
      console.log(res);
    });
  },

  methods: {
    backhome() {
      this.$router.push({ name: "home" });
    },
    tabEvents() {
      var id = this.$route.query.id;
      if (this.current == "default") {
        this.current = "up";
        goodsList({
          isHot: id == 2 ? 1 : "",
          isNew: id == 1 ? 1 : "",
          order: "desc",
        }).then((res) => {
          console.log(res);
          this.goodsList = res;
        });
      } else if (this.current == "up") {
        this.current = "down";
        goodsList({
          isHot: id == 2 ? 1 : "",
          isNew: id == 1 ? 1 : "",
          order: "asc",
        }).then((res) => {
          console.log(res);
          this.goodsList = res;
        });
      } else {
        this.current = "default";
        goodsList({
          isHot: id == 2 ? 1 : "",
          isNew: id == 1 ? 1 : "",
          order: "",
        }).then((res) => {
          console.log(res);
          this.goodsList = res;
        });
      }
    },

    goGoodsdetail(val) {
      this.$router.push({
        name: "categoryGoodsdetail",
        query: {
          id: val,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../scss/list/index.scss";
* {
  margin: 0;
  padding: 0;
}
</style>